<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>地址解析</title>
    <script src="../../../../lib/include.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }

        input#address {
            width: 300px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KNABZ-DZO64-WLEU6-D4PVH-K6M6K-K3BPN"></script>

</head>

<body onload="init()">
<script>
    var geocoder, map, marker = null;
    var info = {};
    var init = function () {
        sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.activityAddress, "");
        var center = new qq.maps.LatLng(39.916527, 116.397128);
        map = new qq.maps.Map(document.getElementById('container'), {
            center: center,
            zoom: 15,
        });

        //地址和经纬度之间进行转换服务
        geocoder = new qq.maps.Geocoder();
        //设置服务请求成功的回调函数
        geocoder.setComplete(function (result) {
            info.location = result.detail.location;
            info.address = result.detail.address;
            info.addressComponents = result.detail.addressComponents;
            // console.log(info);
            map.setCenter(result.detail.location);
            var marker = new qq.maps.Marker({
                map: map,
                position: result.detail.location
            });
            //点击Marker会弹出反查结果
            qq.maps.event.addListener(marker, 'click', function () {
                alert("坐标地址为： " + result.detail.location);
            });
        });
        //若服务请求失败，则运行以下函数
        geocoder.setError(function () {
            alert("出错了，请输入正确的地址！！！");
        });
    };

    function codeAddress() {
        var address = document.getElementById("address").value;
        //对指定地址进行解析
        geocoder.getLocation(address);
    }

    function initAddress() {
        var address = decodeURI(aGET.address);
        if (!empty(address)) {
            $("#address").val(address);
            geocoder.getLocation(address);
        }
    }

    setTimeout(function () {
        initAddress();
    },1000);

    function save() {
        if (!empty(info)) {
            sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.activityAddress, info);
        }
        parent.layer.closeAll();
    }
</script>
<div>
    <div class="col-sm-12 form-group" style="padding: 0;margin-top: 10px;display: block;width: 100%">
        <div class="col-sm-10" style="display: inline-block">
            <input type="text" id="address" class="form-control" style="width: 100%" placeholder="请输入地址">
        </div>
        <div class="col-sm-2" style="display: inline-block">
            <button class="form-control btn btn-success" onclick="codeAddress()">搜索</button>
        </div>
    </div>
    <div style="width:100%;height:350px" id="container"></div>
    <div style="text-align: center;margin-top: 10px">
        <a href="javascript:parent.layer.closeAll();" class="btn btn-default" style="width: 10%;">关 闭</a>
        <a href="javascript:save()" class="btn btn-primary" style="width: 10%;">保 存</a>
    </div>
</div>
</body>

</html>
